<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>QQ音乐</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <header class="hea">
        <div class="heaCon">
            <h1 class="logo">
                <a href="#">
                    <img src="/static/images/logo.png">
                </a>
            </h1>
            <nav class="navlist">
                <a href="#">音乐馆</a>
                <a href="#">我的音乐</a>
                <a href="#">客户端</a>
                <a href="#">音乐号</a>
                <a href="#">VIP</a>
            </nav>
            <nav class="subnav">
                <a href="#">首页</a>
                <a href="#">歌手</a>
                <a href="#">新碟</a>
                <a href="#">排行榜</a>
                <a href="#">分类歌单</a>
                <a href="#">电台</a>
                <a href="#">MV</a>
                <a href="#">数字专辑</a>
                <a href="#">票务</a>
            </nav>
            <div class="search">
                <input type="text" placeholder="搜索音乐、MV、歌单、用户"/>
                <button class="seaBtn">
                    <span></span>
                </button>
            </div>
            <div class="login">
                <a href="#" class="loginBtn">登陆</a>
                <a href="#" class="btnGreen">开通绿钻豪华版</a>
                <a href="#" class="btnPay">开通付费包</a>
            </div>
        </div>
    </header>
    <!--新碟首发-->
    <div class="newSong">
        <div class="songCon">
            <h2 class="songBt">新碟首发</h2>
            <nav class="songNav">
                <a href="#">内地</a>
                <a href="#">港台</a>
                <a href="#">欧美</a>
                <a href="#">韩国</a>
                <a href="#">日本</a>
                <a href="#">其他</a>
                <a href="#">更多></a>
            </nav>
            <ul class="songList">
                <li class="songItem">
                    <div class="pic">
                        <a href="#">
                            <img src="/static/images/pic01.jpg" >
                            <span class="mask"></span>
                            <span class="play"></span>
                        </a>
                    </div>
                    <h4><a href="#">她和她的猫</a></h4>
                    <p><a href="#">夏婉安</a></p>
                </li>
                <li class="songItem">
                    <div class="pic">
                        <a href="#">
                            <img src="/static/images/pic02.jpg" >
                            <span class="mask"></span>
                            <span class="play"></span>
                        </a>
                    </div>
                    <h4><a href="#">谣儿调</a></h4>
                    <p><a href="#">一棵小葱 / 戚琦</a></p>
                </li>
                <li class="songItem">
                    <div class="pic">
                        <a href="#">
                            <img src="/static/images/pic03.jpg" >
                            <span class="mask"></span>
                            <span class="play"></span>
                        </a>
                    </div>
                    <h4><a href="#">失焦</a></h4>
                    <p><a href="#">新声主义</a></p>
                </li>
                <li class="songItem">
                    <div class="pic">
                        <a href="#">
                            <img src="/static/images/pic04.jpg" >
                            <span class="mask"></span>
                            <span class="play"></span>
                        </a>
                    </div>
                    <h4><a href="#">立秋</a></h4>
                    <p><a href="#">音阙诗婷 / 昆玉</a></p>
                </li>
                <li class="songItem">
                    <div class="pic">
                        <a href="#">
                            <img src="/static/images/pic05.jpg" >
                            <span class="mask"></span>
                            <span class="play"></span>
                        </a>
                    </div>
                    <h4><a href="#">与山</a></h4>
                    <p><a href="#">半阳</a></p>
                </li>
                <li class="songItem">
                    <div class="pic">
                        <a href="#">
                            <img src="/static/images/pic06.jpg" >
                            <span class="mask"></span>
                            <span class="play"></span>
                        </a>
                    </div>
                    <h4><a href="#">傀</a></h4>
                    <p><a href="#">任然</a></p>
                </li>
                <li class="songItem">
                    <div class="pic">
                        <a href="#">
                            <img src="/static/images/pic07.jpg" >
                            <span class="mask"></span>
                            <span class="play"></span>
                        </a>
                    </div>
                    <h4><a href="#">英雄降临</a></h4>
                    <p><a href="#">任贤齐</a></p>
                </li>
                <li class="songItem">
                    <div class="pic">
                        <a href="#">
                            <img src="/static/images/pic08.jpg" >
                            <span class="mask"></span>
                            <span class="play"></span>
                        </a>
                    </div>
                    <h4><a href="#">落单的翅膀</a></h4>
                    <p><a href="#">喵了个咪</a></p>
                </li>
                <li class="songItem">
                    <div class="pic">
                        <a href="#">
                            <img src="/static/images/pic09.jpg" >
                            <span class="mask"></span>
                            <span class="play"></span>
                        </a>
                    </div>
                    <h4><a href="#">夏天的风</a></h4>
                    <p><a href="#">温迪</a></p>
                </li>
                <li class="songItem">
                    <div class="pic">
                        <a href="#">
                            <img src="/static/images/pic10.jpg" >
                            <span class="mask"></span>
                            <span class="play"></span>
                        </a>
                    </div>
                    <h4><a href="#">替代品</a></h4>
                    <p><a href="#">单九希</a></p>
                </li>
            </ul>
        </div>
    </div>
    <!--排行榜-->
    <div class="rank">
        <div class="rankCon">
            <h2 class="rankBt">排行榜</h2>
            <ul class="rankList">
                <li class="rankItem">
                    <div class="itemBg">
                        <h2 class="itemBt">
                            <a href="#" class="topList">巅峰榜</a>
                            <a href="#" class="rage">流行指数</a>
                        </h2>
                        <div class="liPlay">
                            <span class="line"></span>
                            <span class="play"></span>
                        </div>
                        <ul class="itemList">
                            <li>
                                <div class="number">1</div>
                                <p>
                                    <a href="#">这么久没见</a>
                                </p>
                                <p>
                                    <a href="#">薛之谦</a>
                                </p>
                            </li>
                            <li>
                                <div class="number">2</div>
                                <p>
                                    <a href="#">第一次告白</a>
                                </p>
                                <p>
                                    <a href="#">TFBOYS</a>
                                </p>
                            </li>
                            <li>
                                <div class="number">3</div>
                                <p>
                                    <a href="#">陷落美好</a>
                                </p>
                                <p>
                                    <a href="#">易烊千玺</a>
                                </p>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="rankItem">
                    <div class="itemBg">
                        <h2 class="itemBt">
                            <a href="#" class="topList">巅峰榜</a>
                            <a href="#" class="rage">热歌</a>
                        </h2>
                        <div class="liPlay">
                            <span class="line"></span>
                            <span class="play"></span>
                        </div>
                        <ul class="itemList">
                            <li>
                                <div class="number">1</div>
                                <p>
                                    <a href="#">画 (Live Piano Session Ⅱ)</a>
                                </p>
                                <p>
                                    <a href="#">G.E.M邓紫棋</a>
                                </p>
                            </li>
                            <li>
                                <div class="number">2</div>
                                <p>
                                    <a href="#">陷落美好</a>
                                </p>
                                <p>
                                    <a href="#">易烊千玺</a>
                                </p>
                            </li>
                            <li>
                                <div class="number">3</div>
                                <p>
                                    <a href="#">缘分一道桥</a>
                                </p>
                                <p>
                                    <a href="#">王力宏/谭维维</a>
                                </p>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="rankItem">
                    <div class="itemBg">
                        <h2 class="itemBt">
                            <a href="#" class="topList">巅峰榜</a>
                            <a href="#" class="rage">新歌</a>
                        </h2>
                        <div class="liPlay">
                            <span class="line"></span>
                            <span class="play"></span>
                        </div>
                        <ul class="itemList">
                            <li>
                                <div class="number">1</div>
                                <p>
                                    <a href="#">这么久没见</a>
                                </p>
                                <p>
                                    <a href="#">薛之谦</a>
                                </p>
                            </li>
                            <li>
                                <div class="number">2</div>
                                <p>
                                    <a href="#">第一次告白</a>
                                </p>
                                <p>
                                    <a href="#">TFBOYS</a>
                                </p>
                            </li>
                            <li>
                                <div class="number">3</div>
                                <p>
                                    <a href="#">慢半拍</a>
                                </p>
                                <p>
                                    <a href="#">薛之谦</a>
                                </p>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="rankItem">
                    <div class="itemBg">
                        <h2 class="itemBt">
                            <a href="#" class="topList">巅峰榜</a>
                            <a href="#" class="rage">欧美</a>
                        </h2>
                        <div class="liPlay">
                            <span class="line"></span>
                            <span class="play"></span>
                        </div>
                        <ul class="itemList">
                            <li>
                                <div class="number">1</div>
                                <p>
                                    <a href="#">The Archer</a>
                                </p>
                                <p>
                                    <a href="#">Taylor Swift</a>
                                </p>
                            </li>
                            <li>
                                <div class="number">2</div>
                                <p>
                                    <a href="#">Señorita</a>
                                </p>
                                <p>
                                    <a href="#">Shawn Mendes/Camila Cabello</a>
                                </p>
                            </li>
                            <li>
                                <div class="number">3</div>
                                <p>
                                    <a href="#">bad guy</a>
                                </p>
                                <p>
                                    <a href="#">Billie Eilish/Justin Bieber</a>
                                </p>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="rankItem">
                    <div class="itemBg">
                        <h2 class="itemBt">
                            <a href="#" class="topList">巅峰榜</a>
                            <a href="#" class="rage">韩国</a>
                        </h2>
                        <div class="liPlay">
                            <span class="line"></span>
                            <span class="play"></span>
                        </div>
                        <ul class="itemList">
                            <li>
                                <div class="number">1</div>
                                <p>
                                    <a href="#">ICY</a>
                                </p>
                                <p>
                                    <a href="#">ITZY</a>
                                </p>
                            </li>
                            <li>
                                <div class="number">2</div>
                                <p>
                                    <a href="#">BOOM</a>
                                </p>
                                <p>
                                    <a href="#">NCT DREAM (엔시티 드림)</a>
                                </p>
                            </li>
                            <li>
                                <div class="number">3</div>
                                <p>
                                    <a href="#">기억하나요 내 모든 날과 그때를 (Remember me)</a>
                                </p>
                                <p>
                                    <a href="#">거미 (Gummy)</a>
                                </p>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--footer-->
    <footer class="foot">
        <div class="footCon">
            <div class="footTop">
                <!--下载QQ音乐客户端-->
                <div class="down">
                    <h3 class="footBt">下载QQ音乐客户端</h3>
                    <ul class="footList">
                        <li class="footItem">
                            <a href="#">
                                <i class="itemPic"></i>
                                <span class="itemText">PC版</span>
                            </a>
                        </li>
                        <li class="footItem">
                            <a href="#">
                                <i class="itemPic"></i>
                                <span class="itemText">MAC版</span>
                            </a>
                        </li>
                        <li class="footItem">
                            <a href="#">
                                <i class="itemPic"></i>
                                <span class="itemText">Android版</span>
                            </a>
                        </li>
                        <li class="footItem">
                            <a href="#">
                                <i class="itemPic"></i>
                                <span class="itemText">iPhone版</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <!--特色产品-->
                <div class="down product">
                    <h3 class="footBt">特色产品</h3>
                    <ul class="footList">
                        <li class="footItem">
                            <a href="#">
                                <i class="itemPic"></i>
                                <span class="itemText">全民K歌</span>
                            </a>
                        </li>
                        <li class="footItem">
                            <a href="#">
                                <i class="itemPic"></i>
                                <span class="itemText">Super Sound</span>
                            </a>
                        </li>
                        <li class="footItem">
                            <a href="#">
                                <i class="itemPic"></i>
                                <span class="itemText">QPlay</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <!--合作链接-->
                <div class="footLink">
                    <h3 class="footBt">合作链接</h3>
                    <ul class="linkList">
                        <li class="linkItem"><a href="#">CJ ENM</a></li>
                        <li class="linkItem"><a href="#">腾讯视频</a></li>
                        <li class="linkItem"><a href="#">手机QQ空间</a></li>
                        <li class="linkItem"><a href="#">最新版QQ</a></li>
                        <li class="linkItem"><a href="#">腾讯社交广告</a></li>
                        <li class="linkItem"><a href="#">电脑管家</a></li>
                        <li class="linkItem"><a href="#">QQ浏览器</a></li>
                        <li class="linkItem"><a href="#">腾讯微云</a></li>
                        <li class="linkItem"><a href="#">腾讯云</a></li>
                        <li class="linkItem"><a href="#">企鹅FM</a></li>
                        <li class="linkItem"><a href="#">智能电视网</a></li>
                        <li class="linkItem"><a href="#">当贝市场</a></li>
                    </ul>
                </div>

                <!--开放平台-->
                <div class="footOpen">
                    <h3 class="footBt">开放平台</h3>
                    <ul class="openList">
                        <li class="openItem"><a href="#">腾讯音乐人</a></li>
                        <li class="openItem"><a href="#">音乐号认证</a></li>
                    </ul>
                </div>

                <!--TME集团官网-->
                <div class="tme footOpen">
                    <h3 class="footBt">TME集团官网</h3>
                    <ul class="openList">
                        <li class="openItem"><a href="#">腾讯音乐</a></li>
                    </ul>
                </div> 
            </div>

            <!--底部第二部分-->
            <div class="footBot">
                <p>
                    <a href="#">关于腾讯</a>
                    <a href="#">About Tencent</a>
                    <a href="#">服务条款</a>
                    <a href="#">用户服务协议</a>
                    <a href="#">隐私政策</a>
                    <a href="#">权利声明</a>
                    <a href="#">广告服务</a>
                    <a href="#">腾讯招聘</a>
                    <a href="#">客服中心</a>
                    <a href="#">网站导航</a>
                </p>
                <p>
                    Copyright © 1998 - 2019 Tencent. All Rights Reserved.
                </p>
                <p>
                    腾讯公司 、版权所有、腾讯网络文化经营许可证
                </p>
            </div>
        </div>
    </footer>
</body>
</html>